<!--
   通用的选择某项业务，  一般用作修改页。 
   目前支持：  门店 和  应用 
  @author terrfly
  @site https://www.jeepay.vip
  @date 2022/12/08 14:18
-->
<template>
	<view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
	 <view v-if="props.hasTitle" class="details-title">
		  <slot name="title">{{ bizTypeMap[props.bizType].title }}</slot>
	  </view>
	  <view @tap="show">
	    <view class="sub-title">
	      <view class="details-info single-text-beyond"> 
		    <text :class="{ 'text-gray' : vdata.selectedRow[bizTypeMap[props.bizType].nameKey] ? false : true }">
				{{ vdata.selectedRow[bizTypeMap[props.bizType].nameKey] || bizTypeMap[props.bizType].nameDef }} 
			  </text>
		  </view>
	      <image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" v-if="isIcon" />
	    </view>
	    <view class="sub-info details-info single-text-beyond">{{ vdata.selectedRow[bizTypeMap[props.bizType].id] }} </view>
	  </view>
	</view>
	
	<view>
		<JeepayBizinfoSelect ref="jeepayBizinfoSelectRef" :bizType="props.bizType" />
	</view>
	
</template>

<script setup>
	
import { ref, reactive, nextTick, watch, onMounted } from "vue"

const jeepayBizinfoSelectRef = ref()

const bizTypeMap = {
	store: {title: '选择门店', nameKey: 'storeName', nameDef: '请选择门店', id : "storeId" },
	mchApp: {title: '选择应用', nameKey: 'appName', nameDef: '请选择应用', id : "appId" },
}

// emit 父组件使用： v-model:value="val" 进行双向绑定。
const emits = defineEmits(['update:value', 'update:showName', 'change'])

const props = defineProps({
	
  // 是否包含 标题部分 	
  hasTitle: { type: Boolean, default: true },	
 
  //绑定的值， 双向绑定
  value: { type: [String, Number] },
  
  // 仅仅用作修改的回显
  showName: { type: [String, Number] },
  
  // 业务类型： 默认门店
  bizType: { type: String, default: 'store' },
  isIcon: { type: Boolean, default: true },
  
})


onMounted(()=>{
	if(props.value){
		vdata.selectedRow[bizTypeMap[props.bizType].id] = props.value	
	}
	if(props.showName){
		vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = props.showName	
	}
})

// 切换时 
watch(() => props.value, (newVal, oldVal) => {
	vdata.selectedRow[bizTypeMap[props.bizType].id] = newVal
  }
)

// 切换时 
watch(() => props.showName, (newVal, oldVal) => {
	vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = newVal
  }
)

const vdata = reactive({
	
	// 当前选择行
	selectedRow: {},
	
})

function show(){
	jeepayBizinfoSelectRef.value.open().then((selectedRow) => {
		vdata.selectedRow = selectedRow || {}
		
		emits("update:value", vdata.selectedRow[bizTypeMap[props.bizType].id])
		emits("update:showName", vdata.selectedRow[bizTypeMap[props.bizType].nameKey])
		emits("change", vdata.selectedRow[bizTypeMap[props.bizType].id])
	})
}


</script>

<style lang="scss" scoped>
.details-wrapper {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  background-color:#fff;
  .details-title {
    width: 180rpx;
    color: #4c4c4c;
  }
  .details-info {
    flex-grow:1;
    width: 405rpx;
  }
  image {
    width: 108rpx;
    height: 100rpx;
  }
  
  
  .sub-title {
    flex: 1;
    display: flex;
    image {
      width: 108rpx;
      height: 40rpx;
    }
  }
  .sub-info {
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #a1a1a1;
    padding-bottom: 20rpx;
  }
  
  .text-gray{
	  color: #b3b3b3;
  }
  
}

</style>
